<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1, user-scalable=no" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/pc/css/media.css"/>
    <link rel="stylesheet" type="text/css" href="/pc/css/common.css"/>

    <title>云堡垒机</title>
    <link href="/pc/css/mui.picker.css" rel="stylesheet" />
    <link href="/pc/css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/pc/css/index.css"/>
    <script src="//do.yunzhijia.com/pub/js/qingjs.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/pc/css/index.css"/>
    <script src="/pc/js/jquery-3.0.0.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

</head>
<body style="background: #eaeff3;>
<div class="main_div">
<div class="main_body">

    <p class="topTip_p">1，L-资产数： 表示云堡垒机可以管理服务器资产的数量。<br>
        2，C-并发会话数： 表示可以通过云堡垒机连接多少个运维会话数（即SSH/RDP的远程连接数量）。例如，有20个运维人员，假如平均每个人连接5个会话，就有20*5=100个连接数,（请根据实际情况计算连接数，以上计算方式仅供参考）
    </p>
    <div class="listing">
        <div class="items">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/pc/image/baoleiji.png" width="20px"; height="15px">
                </i></div>
                <h4 class="title">云堡垒机</h4>
                <ul class="config2_ul" id="list">
                    <li>
                        <div class="_config_div left add" id="showVpnPicker">
                            <span class="left">规格</span>
                            <span class="left blj_right" id="vpnResult">L20-C10</span>
                            <i class="right">
                                <img src="/pc/image/go_right.png">
                            </i>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd" style="width: 45% !important;">
                            <div class="stat_minus minus1">
                                <i>
                                    <img src="/pc/image/Group_MINUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnum" class="stat_num input_bg1 zhou" value="1">
                            <div class="stat_plus plus1">
                                <i>
                                    <img src="/pc/image/Group_PLUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="summary_div">
                <ul class="configInfo_ul left">

                    <li>资产数:<span id = "vpnCount" value="1">L20</span></li>
                    <li>并发数:<span id="vpnData" value="1">C10</span></li>
                    <li>数量:<span id = "baoLjGg" value="1">1</span>台</li>
                </ul>
                <p class="price_p right " id="cpu_price">￥999</p>
            </div>
        </div>
    </div>
</div>
<#include "foot.ftl">
<#--//九个计算值
        //CPU-->
<input type="hidden" id="valueOfAli" name="valueOfAli" value="580">
<input type="hidden" id="samplePrice" name="samplePrice" value="999">


<#--//存储-->
<input type="hidden" id="total_stat_t" name="total_stat_t" value="0">
<input type="hidden" id="total_stat_a" name="total_stat_a" value="0">
<input type="hidden" id="total_stat_d" name="total_stat_d" value="0">

<#--//带宽-->
<input hidden id="price_two" name="price_two" value="0">
<input type="hidden" id="tx_sata_tag" name="tx_sata_tag" value="0">

<input type="hidden" name="flag" id="flag" value="0">
<input type="hidden" name="flagNum" id="flagNum" value="0">
<input type="hidden" name="flag_die" id="flag_die" value="1">
<input type="hidden" name="flag_die_flag" id="flag_die_flag" value="1">
<input type="hidden" name="title" id="title" value="${title}">
<input type="hidden" name="openId" id="openId" value="${openId}">
</div>
<script src="/pc/js/mui.min.js"></script>
<script src="/pc/js/mui.poppicker.js"></script>
<script src="/pc/js/mui.picker.min.js"></script>
<script src="/pc/js/yun_title.js"></script>
<script>
    $("#ali_price").text("￥580");
    $("#tx_price").text("无此规格");
    function  getAllPrice() {
        var count=parseFloat($('#statnum').val());
        var samplePrice = document.getElementById('samplePrice');
        var valueOfYear = document.getElementById('valueOfAli');
        var dxPrice=parseFloat(samplePrice.value);
        var aliPrice = parseFloat(valueOfYear.value);
        $("#ali_price").text("￥"+(count*aliPrice).toFixed(2));
        $("#allprice").text("￥"+(count*dxPrice).toFixed(2));
        $("#cpu_price").text("￥"+(count*dxPrice).toFixed(2));

    };
    (function($, doc) {
        $.init();
        $.ready(function() {
            getAllPrice();
            //实例配置
            var vpnPicker = new $.PopPicker();
            vpnPicker.setData(
                [
                {value:999,text:'L20_C10',textTwo:'L20',textOne:'C10',aliPrice:'580'},
                {value:1888,text:'L50_C25',textTwo:'L50',textOne:'C25',aliPrice:'1800'},
                {value:2999,text:'L100_C50',textTwo:'L100',textOne:'C50',aliPrice:'1800'},

                {value:4888,text:'L200_C100',textTwo:'L200',textOne:'C100',aliPrice:'6800'},
                {value:6999,text:'L400_C200',textTwo:'L400',textOne:'C200',aliPrice:'6800'},
                {value:10999,text:'L800_C400',textTwo:'L800',textOne:'C400',aliPrice:'6800'}
                ]
            );
            var showVpnPickerButton = doc.getElementById('showVpnPicker');
            var vpnResult = doc.getElementById('vpnResult');
            var vpnCount= doc.getElementById("vpnCount");
            var cpu_price= doc.getElementById("cpu_price");
            var samplePrice = doc.getElementById('samplePrice');
            var valueOfAli=doc.getElementById('valueOfAli');
            var total_cpu_t=doc.getElementById('total_cpu_t');

            var vpnData=doc.getElementById('vpnData');
            //初始化计算价格
            //getEntityPrice(cpuCount_f.innerText,MemoryCount_f.innerText);
            //CPU点击事件
            showVpnPickerButton.addEventListener('tap', function(event) {
                vpnPicker.show(function(items) {
                    vpnResult.innerHTML=items[0].text;
                    vpnCount.innerHTML=items[0].textTwo;
                    //cpu_price.innerText ="￥"+items[0].valueOfMon;
                    valueOfAli.value = items[0].aliPrice;
                    //total_cpu_t.value=items[0].aliPrice;
                    samplePrice.value=items[0].value;
                    vpnData.innerHTML=items[0].textOne;
                    //baoLjGg.innerHTML=items[0].text;
                    getAllPrice();
                });



            }, false);
        });
    })(mui, document);
    $('#list').on("blur",'.stat_num',function (event) {
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=1;

        }
        if(num<=1||num==""){
            $(this).val(1);
            //$('.stat_num')
            /*var =doc.getElementById('baoLjGg');*/
            $("#baoLjGg").text(1);
            count(num);
        }
        else if(num>=2000){
            $(this).val(2000);
            /*$("#vpnData").text(num);*/
            count(num);
            $("#baoLjGg").text(num);
        }
        else {
            $(this).val(num);
            /*$("#vpnData").text(num);*/
            $("#baoLjGg").text(num);
            count(num);
        }
    });
    $('#list').on('click','.stat_plus',function (event) {
        console.dir(this);
        var numInput = $(this).prev();
        var  num=parseInt(numInput.val());
        if(num>=2000){
            numInput.val(2000);
           /* $("#vpnData").text(num);*/
            $("#baoLjGg").text(num);
           count(num);
        }
        else {
            num=num+1;
            numInput.val(num);
            /*$("#vpnData").text(num);*/
            $("#baoLjGg").text(num);
            count(num);
        }
    });
    $('#list').on('click','.stat_minus',function (event) {
        console.dir(this);
        var numInput = $(this).next();
        var num=parseInt(numInput.val());
        if(num<=1){
            numInput.val(1);
            /*$("#vpnData").text(1);*/
            $("#baoLjGg").text(num);
            count(1);
        }
        else {
            num=num-1;
            numInput.val(num);
            $("#baoLjGg").text(num);
            /*$("#vpnData").text(num);*/
            count(num);
        }
    });
    function count(num) {
        var samplePrice = document.getElementById('samplePrice');
        var valueOfYear = document.getElementById('valueOfAli');
        var dxPrice=parseFloat(samplePrice.value);
        var aliPrice = parseFloat(valueOfYear.value);
        $("#ali_price").text("￥"+(num*aliPrice).toFixed(2));
        $("#allprice").text("￥"+(num*dxPrice).toFixed(2));

        $("#cpu_price").text("￥"+(num*dxPrice).toFixed(2));
    }

    $('.checkInfo_right').click(function () {
        var openId=$('#openId').val();
        //VCPU
        var shiLiPz=$('#baoLjGg').text()+"台";
        var shouQuanNum=$('#vpnCount').text();
        var shiJian=$('#vpnData').text();


        //三个价格
        var aliprice=$('#ali_price').text();
        var txprice=$('#tx_price').text();
        var allprice=$('#allprice').text();
        if(aliprice=="无此规格"){
            aliprice=0;
        }
        else {
            aliprice=aliprice.substring(1);
        }
        if(txprice=="无此规格"){
            txprice=0;
        }
        else {
            txprice=txprice.substring(1);
        }
        allprice=allprice.substring(1);

        var data1 = {
            cpuAndMem:shiLiPz,
            meMory:'',
            stat:shouQuanNum,
            brandNum:shiJian,

            ali_price:aliprice,
            tx_price:txprice,
            all_price:allprice,
            productTypeId:9,//云堡垒机
            productName:'云堡垒机',
            oneKey:'数量',
            twoKey:'资产数',
            threeKey:'并发数',
            disCount:'1',
            oneImage:'list_icon7',
            twoImage:'list_icon6',
            threeImage:'list_icon5'
        }
        $.post("/takeList/"+openId+"/",data1,function(data){
            if(data.type=="success"){
                layer.msg(data.msg);
            }
        });
    });



</script>


</body>

</html>
